import React, { useRef, useState } from 'react'
import store from '../store/index'
/* 
使用Redux的主要优势之一是它可以帮你处理应用的共享状态。如果两个组件需要访问同一状态，该怎么办？
这种两个组件同时需要访问同一状态的现象称为“共享状态”。
你可以将该状态提升到附近的父组件，但是如果该父组件在组件树中向上好几个组件的位置，
那么将状态当做属性向下一个一个地传递，这项工作很快就会变得乏味。此外，在该父组件和该子组件之间的组件甚至根本不需要访问该状态！
 */
// 需要修改reducer.js的值
export default function Redux01() {
    console.log(store.getState());
    const [state, setState] = useState(store.getState())
    const { str, list } = state;
    const inputRef = useRef()
    const chg = () => {
        const val = inputRef.current.value;
        const action = {
            type: "chginput",
            data: val
        }
        store.dispatch(action);
    }
    const add = () => {
        const val = inputRef.current.value;
        const action = {
            type: "add",
            data: val
        }
        store.dispatch(action);
    }
    const chgstr = () => {
        setState(store.getState())
    }
    store.subscribe(chgstr);
    return (
        <div id='app'>
            {str} <br />
            <input type="text" ref={inputRef} placeholder={str} onChange={chg} />
            <button onClick={add} > 添加 </button>
            {
                list.map((item, i) => {
                    return <li key={i} onClick={()=> store.dispatch({ type: "del",data: i }) } > 我是{item} 点击我可以删除  </li>
                })
            }

        </div>
    )
}
